<script setup lang="ts">
import { ref } from 'vue';

const experiences = ref([
  {
    id: 1,
    title: '奢华度假胜地',
    description: '精选全球顶级度假酒店',
    image: 'https://ts1.tc.mm.bing.net/th/id/R-C.bb1f47dbd71ec45baa4c56c33e553b51?rik=xSVFHOCH3W0qwQ&riu=http%3a%2f%2fwww.cntgol.com%2fuploads%2fallimg%2f200602%2f1343542Z9-7.png&ehk=COcKI51qrLBUFkhRq2xLUWwjq%2baBc4BhFaRBovZpNk8%3d&risl=&pid=ImgRaw&r=0'
  },
  {
    id: 2,
    title: '户外探险体验',
    description: '激情刺激的户外活动',
    image: 'https://ts1.tc.mm.bing.net/th/id/R-C.7231816c7ed85707e0f31d7ba066ed75?rik=JW3pgZQ0zG%2bWUg&riu=http%3a%2f%2fwww.archina.com%2fdata%2fupload%2fueditor%2f20221227%2f63aa79bd5db16upfile.jpg&ehk=LuLuFQdaIN4%2bStcHJzfq1vKHp%2f0fNiEQ3u2DfVTRql4%3d&risl=&pid=ImgRaw&r=0'
  },
  {
    id: 3,
    title: '世界文化节庆',
    description: '体验独特的地域文化',
    image: 'https://img95.699pic.com/photo/50086/5089.jpg_wh860.jpg'
  },
  {
    id: 4,
    title: '环球美食之旅',
    description: '探索世界各地美食',
    image: 'https://img1.qunarzz.com/travel/poi/1507/58/ca069d9d642d93.jpg'
  }
]);
</script>

<template>
  <section>
    <div class="section-title">
      <h2>旅行灵感</h2>
    </div>
    <div class="experience-grid">
      <div v-for="exp in experiences" :key="exp.id" class="experience-card">
        <img :src="exp.image" :alt="exp.title" />
        <div class="experience-title">{{ exp.title }}</div>
        <div class="experience-desc">{{ exp.description }}</div>
      </div>
    </div>
  </section>
</template>

<style scoped>
</style>